<template>
  <div class="mask" :class="[state ? 'close' : 'open']"></div>
  <div class="settings" :class="[state ? 'close' : 'open']">
    <div
      class="settings_icon"
      :class="[state ? 'close' : 'open']"
      :style="{ background: theme.color }"
      @click="changeSettingIcon"
    >
      <el-icon v-if="state">
        <setting></setting>
      </el-icon>
      <el-icon v-else>
        <close></close>
      </el-icon>
    </div>
    <div class="settings_form">
      <el-row class="mb20" :gutter="20">
        <el-col :span="12">
          <a-button type="primary">
            <save-outlined />
            保存配置
          </a-button>
        </el-col>
        <el-col :span="12">
          <a-button type="dashed">
            <sync-outlined />
            重置配置
          </a-button>
        </el-col>
      </el-row>
      <!-- 系统设置 -->
      <div class="card_title">系统设置</div>
      <div class="setting_list">
        <div class="title">系统名称</div>
        <el-input v-model="system.title"></el-input>
      </div>
      <div class="setting_list">
        <div class="title">系统标题</div>
        <el-input v-model="system.logo"></el-input>
      </div>
      <a-divider />
      <!-- 整体风格设置 -->
      <div class="setting_item">
        <div class="title">整体风格设置</div>
        <div style="display: flex">
          <div v-for="(item, index) in modeImg" :key="index" class="img_check_box">
            <img :src="item.url" @click="changeMode(item.value)" />
            <div v-if="item.value == theme.mode" class="check_item">
              <check-outlined class="anticon" />
            </div>
          </div>
        </div>
      </div>
      <div class="setting_item">
        <div class="title">主题色</div>
        <div style="display: flex">
          <div
            v-for="item in colorData"
            :key="item"
            class="theme_color"
            :style="{ background: item }"
            @click="changeColor(item)"
          >
            <div v-if="item == theme.color" class="check_item">
              <check-outlined class="anticon" />
            </div>
          </div>
        </div>
      </div>
      <a-divider />
      <!-- 导航设置 -->
      <div class="setting_item">
        <div class="title">导航设置</div>
        <div style="display: flex">
          <div v-for="(item, index) in layoutImg" :key="index" class="img_check_box">
            <img :src="item.url" @click="changeLayout(item.value)" />
            <div v-if="item.value == navigation.layout" class="check_item">
              <check-outlined class="anticon" />
            </div>
          </div>
        </div>
      </div>
      <div class="setting_list">
        <div class="title">固定Header</div>
        <el-switch v-model="navigation.fixedHeader"></el-switch>
      </div>
      <div class="setting_list">
        <div class="title">固定侧边栏</div>
        <el-switch v-model="navigation.fixedSide"></el-switch>
      </div>
      <a-divider />
      <!-- 其他设置 -->
      <div class="card_title">其他设置</div>
      <div class="setting_list">
        <div class="title">多页签模式</div>
        <el-switch v-model="others.tagViews"></el-switch>
      </div>
      <div class="setting_list">
        <div class="title">隐藏设置抽屉</div>
        <el-switch v-model="others.hideSettings"></el-switch>
      </div>
      <a-divider />
      <!-- 页面切换动画 -->
      <div class="card_title">页面切换动画</div>
      <div class="setting_list">
        <div class="title">禁用动画</div>
        <el-switch v-model="animate.disabled"></el-switch>
      </div>
      <div class="setting_list">
        <div class="title">动画效果</div>
        <div style="width: 80px">
          <el-select v-model="animate.name">
            <el-option v-for="item in animateName" :key="item.name" :label="item.alias" :value="item.name"></el-option>
          </el-select>
        </div>
      </div>
      <div class="setting_list">
        <div class="title">动画方向</div>
        <div style="width: 80px">
          <el-select v-model="animate.directions">
            <el-option v-for="item in animateDirections" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { CheckOutlined, SaveOutlined, SyncOutlined } from '@ant-design/icons-vue';
import { Close, Setting } from '@element-plus/icons-vue';
import { storeToRefs } from 'pinia';
import { ref, watch } from 'vue';

import { useSettingStore } from '@/store/settings';

import preset from './type/animate.config';
import { Animate, Settings as Type, Theme } from './type/index';

// 获取settings数据
const settingsStore = useSettingStore();
const { theme, navigation, animate, others, system } = storeToRefs(settingsStore);

// 设置展开关闭状态
const state = ref<boolean>(true);

const changeSettingIcon = () => {
  state.value = !state.value;
};

// 设置风格
const changeMode = (mode: Theme['mode']) => {
  theme.value.mode = mode;
};

// 设置主题色
const colorData: Array<string> = [
  '#F5222D',
  '#FA541C',
  '#FAD814',
  '#3EAF7C',
  '#13C2C2',
  '#1890FF',
  '#722ED1',
  '#EB2F96',
];
const changeColor = (color: string) => {
  theme.value.color = color;
};

// 设置导航
const changeLayout = (layout: 'side' | 'top' | 'mix') => {
  navigation.value.layout = layout;
};

// 设置动画
const animateName = preset.map((item) => {
  return {
    name: item.name,
    alias: item.alias,
  };
});
const animateDirections = ref<Animate['directions'][]>();
watch(
  () => animate.value.name,
  (val) => {
    animateDirections.value = preset.find((item) => item.name === val)!.directions;
    [animate.value.directions] = animateDirections.value!;
  },
  {
    immediate: true,
  },
);
// 监听颜色变化
watch(
  () => theme.value.color,
  (color) => {
    settingsStore.changeColor(color);
  },
  {
    immediate: true,
  },
);
// 设置图片路径
const setUrl = (url: string) => {
  return new URL(`/src/assets/images/settings/${url}`, import.meta.url).href;
};
const modeImg: {
  value: Theme['mode'];
  url: string;
}[] = [
  {
    value: 'light',
    url: setUrl('light.svg'),
  },
  {
    value: 'dark',
    url: setUrl('dark.svg'),
  },
];
const layoutImg: Array<{
  value: 'side' | 'top' | 'mix';
  url: string;
}> = [
  {
    value: 'side',
    url: setUrl('side.svg'),
  },
  {
    value: 'top',
    url: setUrl('top.svg'),
  },
  // , {
  //     value: 'mix',
  //     url: setUrl('mix.svg'),
  // }
];
</script>
<style lang="scss" scoped>
.settings {
  position: fixed;
  top: 0;
  right: 0;
  transition: all 0.5s;
  width: 274px;
  height: 100vh;
  z-index: 100;

  .el-input {
    width: 140px;
  }

  .settings_form {
    background-color: #fff;
    height: 100%;
    padding: 24px;
    overflow-y: auto;

    .card_title {
      font-size: 16px;
      margin-bottom: 12px;
    }

    .setting_item {
      margin-bottom: 24px;

      .title {
        font-size: 16px;
        line-height: 22px;
        margin-bottom: 12px;
      }

      .theme_color {
        width: 20px;
        height: 20px;
        border-radius: 2px;
        cursor: pointer;
        margin-right: 8px;
        color: #fff;
        font-weight: 700;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .img_check_box {
        margin-right: 16px;
        position: relative;
        border-radius: 4px;
        cursor: pointer;

        .check_item {
          position: absolute;
          top: 0;
          right: 0;
          width: 100%;
          padding-top: 15px;
          padding-left: 24px;
          height: 100%;
          font-size: 14px;
          font-weight: 700;

          .anticon {
            display: inline-block;
            color: inherit;
            font-style: normal;
            line-height: 0;
            text-align: center;
            text-transform: none;
            vertical-align: -0.125em;
            text-rendering: optimizeLegibility;
            -webkit-font-smoothing: antialiased;
          }
        }

        img {
          vertical-align: middle;
          border-style: none;
        }
      }
    }

    .setting_list {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 0;
    }
  }

  .settings_icon {
    position: absolute;
    display: inline-block;
    top: 200px;
    left: -40px;
    width: 40px;
    height: 40px;
    font-size: 22px;
    background-color: red;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px 0 0 5px;
    color: #fff;
  }

  &.open {
    display: inline-block;
  }

  &.close {
    right: -274px;
  }
}

.mask {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  transition: all 0.5s;
  z-index: 100;
  background-color: rgba(0, 0, 0, 0.15);

  &.open {
    display: inline-block;
  }

  &.close {
    display: none;
  }
}
</style>
